import React from 'react';
import {PageContainer} from '@ant-design/pro-components';
import {CopyOutlined} from '@ant-design/icons';
import {Card, Flex, Typography, Space, message, ConfigProvider, theme,} from 'antd';
import FloatButtonGroupAll from "@/components/FloatButtonGroupAll/FloatButtonGroupAll";
import {linksA2, linksA3, linksA4, linksCdz5, linksJ1, linksShare} from "@/utils/constantsLinksXb";
import {useAccess, Access} from 'umi';

const NavFloatButton: React.FC = () => {
  const {Text, Link} = Typography;
  const SpaceTextGroup = () => (
    <>
      <Space direction="vertical">
        <Text>Ant Design (default)</Text>
        <Text type="secondary">Ant Design (secondary)</Text>
        <Text type="success">Ant Design (success)</Text>
        <Text type="warning">Ant Design (warning)</Text>
        <Text type="danger">Ant Design (danger)</Text>
        <Text disabled>Ant Design (disabled)</Text>
        <Text mark>Ant Design (mark)</Text>
        <Text code>Ant Design (code)</Text>
        <Text keyboard>Ant Design (keyboard)</Text>
        <Text underline>Ant Design (underline)</Text>
        <Text delete>Ant Design (delete)</Text>
        <Text strong>Ant Design (strong)</Text>
        <Text italic>Ant Design (italic)</Text>
        <Link href="https://ant.design/components/overview-cn" target="_blank" copyable={{text: 'https://ant.design/components/overview-cn'}}>Ant Design (Link)</Link>
        <Link href="https://pro.ant.design/zh-CN/docs/overview" target="_blank" copyable={{text: 'https://pro.ant.design/zh-CN/docs/overview'}}>Ant Design Pro (Link)</Link>
      </Space>
    </>
  );

  // 明确指定Props类型
  interface CopyableLinkProps {
    href: string; // 链接地址
    text: string; // 链接显示的文本
    msgTypeOnCopy: 'info' | 'success' | 'warning' | 'error'; // 复制时的信息类型
    msgOnCopy: string; // 复制成功时显示的信息
  }

  const CopyableLink: React.FC<CopyableLinkProps> = ({href, text, msgTypeOnCopy, msgOnCopy}) => {
    const [messageApi, contextHolder] = message.useMessage();
    const openMsg = () => {
      messageApi.open({
        type: msgTypeOnCopy,
        content: msgOnCopy,
        duration: 1,
      }).then(() => {});
    };
    return (
      <>
        {contextHolder}
        <Link href={href} target="_blank" copyable={{
          text: href,
          onCopy: () => openMsg(),
          icon: <CopyOutlined/>,
          tooltips: '复制链接',
          format: 'text/plain',
          tabIndex: 1,
        }}>{text}</Link>
      </>
    );
  };
  const access = useAccess(); // access 的成员: canReadFoo, canUpdateFoo, canDeleteFoo
  return (
    // 1. 单独使用算法 algorithm: theme.defaultAlgorithm, 2. 组合使用暗色算法与紧凑算法 algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
    <ConfigProvider theme={{algorithm: theme.defaultAlgorithm,}}>
      <PageContainer>
        <Card style={{borderRadius: 8,}} hoverable>
          <Space direction="vertical">
            <Flex justify="space-between" gap={18}>
              {[...Array(1)].map(function (_, index) {
                return <>
                  <Card key={index} style={{borderRadius: 8,}} title={"Demo"} hoverable size={"small"} type={"inner"}>
                    <SpaceTextGroup/>
                  </Card>
                </>;
              })}
              <Card style={{borderRadius: 8,}} title={"IC"} hoverable size={"small"} type={"inner"}>
                <Space direction="vertical">
                  <Card style={{borderRadius: 8,}} title="景安-1服" hoverable size={"small"} type={"inner"}>
                    <Space direction="vertical">
                      <CopyableLink href={linksJ1.link} msgTypeOnCopy='success' msgOnCopy={linksJ1.link} text={linksJ1.name}/>
                      <CopyableLink href={linksJ1.linkBack} msgTypeOnCopy='success' msgOnCopy={linksJ1.linkBack} text={linksJ1.nameBack}/>
                      <CopyableLink href={linksJ1.linkCompanyInfo} msgTypeOnCopy='success' msgOnCopy={linksJ1.linkCompanyInfo} text={linksJ1.nameCompanyInfo}/>
                    </Space>
                  </Card>
                  <Card style={{borderRadius: 8,}} title="阿里云-2服" hoverable size={"small"} type={"inner"}>
                    <Space direction="vertical">
                      <CopyableLink href={linksA2.link} msgTypeOnCopy='success' msgOnCopy={linksA2.link} text={linksA2.name}/>
                      <CopyableLink href={linksA2.linkBack} msgTypeOnCopy='success' msgOnCopy={linksA2.linkBack} text={linksA2.nameBack}/>
                      <CopyableLink href={linksA2.linkCompanyInfo} msgTypeOnCopy='success' msgOnCopy={linksA2.linkCompanyInfo} text={linksA2.nameCompanyInfo}/>
                    </Space>
                  </Card>
                  <Card style={{borderRadius: 8,}} title="阿里云-4服" hoverable size={"small"} type={"inner"}>
                    <Space direction="vertical">
                      <CopyableLink href={linksA4.link} msgTypeOnCopy='success' msgOnCopy={linksA4.link} text={linksA4.name}/>
                      <CopyableLink href={linksA4.linkBack} msgTypeOnCopy='success' msgOnCopy={linksA4.linkBack} text={linksA4.nameBack}/>
                      <CopyableLink href={linksA4.linkCompanyInfo} msgTypeOnCopy='success' msgOnCopy={linksA4.linkCompanyInfo} text={linksA4.nameCompanyInfo}/>
                    </Space>
                  </Card>
                </Space>
              </Card>
              <Card style={{borderRadius: 8,}} title={"ID"} hoverable size={"small"} type={"inner"}>
                <Space direction="vertical">
                  <Card style={{borderRadius: 8,}} title="阿里云-3服" hoverable size={"small"} type={"inner"}>
                    <Space direction="vertical">
                      <CopyableLink href={linksA3.link} msgTypeOnCopy='success' msgOnCopy={linksA3.link} text={linksA3.name}/>
                      <CopyableLink href={linksA3.linkBack} msgTypeOnCopy='success' msgOnCopy={linksA3.linkBack} text={linksA3.nameBack}/>
                      <CopyableLink href={linksA3.linkCompanyInfo} msgTypeOnCopy='success' msgOnCopy={linksA3.linkCompanyInfo} text={linksA3.nameCompanyInfo}/>
                    </Space>
                  </Card>
                  <Card style={{borderRadius: 8,}} title="ID-充电桩" hoverable size={"small"} type={"inner"}>
                    <Space direction="vertical">
                      <CopyableLink href={linksCdz5.link} msgTypeOnCopy='success' msgOnCopy={linksCdz5.link} text={linksCdz5.name}/>
                      <CopyableLink href={linksCdz5.linkBack} msgTypeOnCopy='success' msgOnCopy={linksCdz5.linkBack} text={linksCdz5.nameBack}/>
                    </Space>
                  </Card>
                  <Card style={{borderRadius: 8,}} title="ID-共享充电(停服)" hoverable size={"small"} type={"inner"}>
                    <Space direction="vertical">
                      <CopyableLink href={linksShare.link} msgTypeOnCopy='success' msgOnCopy={linksShare.link} text={linksShare.name}/>
                      <CopyableLink href={linksShare.linkBack} msgTypeOnCopy='success' msgOnCopy={linksShare.linkBack} text={linksShare.nameBack}/>
                    </Space>
                  </Card>
                  <Card style={{borderRadius: 8,}} hoverable size={"small"}>
                    <Link href="https://zchdoc.github.io/zpbstp/pages/zch-encrypt-js.html" target="_blank" copyable={{text: 'https://github.com/ant-design/ant-design-pro'}}>信息查询</Link>
                  </Card>
                </Space>
              </Card>
              <Space direction="vertical">
                <Access accessible={access.canAdmin || false} fallback={null}>
                  <Card style={{borderRadius: 8,}} hoverable title={"信息"} type={"inner"} size={"small"}>
                  </Card>
                </Access>
              </Space>
            </Flex>
          </Space>
        </Card>
        <FloatButtonGroupAll/>
      </PageContainer>
    </ConfigProvider>
  );
};

export default NavFloatButton;
